Speeding up Web Page Loading

Introduction#

Before a user can consume any content, many steps are involved (for example, sending a request, getting a response, rendering the page, and so on) that can add substantial latency. There is another user-perceived delay that surfaces because of the web page construction, called a web page load delay.

A web page consists of multiple web objects, such as HTML, JavaScript, CSS, images, audio, and so on. But some web objects are not required at the initial loading of the page. For example, a web page displays the notification icon but not the list of notifications. The list can be fetched from the server only when the user clicks on the notification icon. To implement such behavior, the code used for the notification list will not be loaded initially. We want to avoid loading this code because it will increase the initial page load time (PLT). This inevitably increases the risk of users losing interest in the site and moving on to another website that loads quickly. This user behavior is depicted in the following illustration, where 2 seconds is an example of the load time:

Load time is one of the important aspects of the user experience, and losing visitors impacts revenue. For example, according to Amazon, a 100 millisecond delay in page load time results in a loss of 1% of their sales.

In this lesson, we’ll discuss the main issues that increase the loading time and how we can address them by prioritizing the components of the web page, such as which component should be loaded and when. Let's start with how a web page loads in the browser.

The web page load process (WPL)#

The web page load process (WPL) consists of multiple steps. Let's understand these steps through the following illustration:

Starting at step 2, the server has two options. The first option is that the server can send an empty HTML document with links to JavaScript, or the server can send a complete HTML document with the content ready to render in the browser. As discussed earlier in this chapter, this is a rendering decision that depends on the design of the application. Next, the browser parses the HTML file and downloads the embedded files. For example, the JavaScript and CSS files are downloaded as soon as the <script> and <link> tags are rendered in the HTML object by the browser.

Note: When the parser encounters the script or link tags, it halts parsing and evaluates the JavaScript or CSS code, which causes a delay in the page loading.

As a result of parsing, we get the DOM tree which the browser converts into a layout tree and renders on the screen. After completely loading the DOM tree, the load event is called by the browser. The job of the load event is to load any JavaScript code that is supposed to execute after the initial page load.

The process above works fine, but there are some subtle inefficiencies that increase the page load time. Let's take a look at them in the next section.

Inefficiencies in page load time (PLT)#

The following are the key inefficiencies that cause a delay during the PLT:

• Unused content: In most cases, the web pages do not use three-quarters ($\frac{3}{4}$) of CSS at the initial load. It increases the load time because unused CSS is also parsed at the load time.

• Blocking JavaScript and CSS: During the HTML parsing of the document, if the parser encounters any JavaScript and CSS code, the parser starts executing it, temporarily halting the DOM construction. Eventually, the control returns to the HTML parser. In order to fulfill the dependencies in the page load process, the parsing process continues to run in sequential order. However, the blocking that happens due to JavaScript and CSS execution proves to be expensive. It’s estimated that the parsing that blocks the DOM roughly takes 15% extra PLT.

• Roundtrips: While parsing the document, if any URL is found, the parser stops the DOM construction and goes to the DNS to get the IP address for that URL, establishes the TCP connection, sends an HTTP request to the server, and obtains the response from the server. This step is repeated for each URL that the browser found in the document, so the round-trip time depends on how many URLs are present in the document.

We’ll use a few techniques to address the issues discussed above. Mainly, we’ll discuss Shandian for page load optimization. In particular, it reduces the PLT by restructuring the load process.

Minimize PLT using Shandian #

Shandian is a technique that streamlines the process of page loading. It ensures that the initial page load is improved by determining which objects on the page should be communicated first to the client and the order it should be done in. It is a system developed and described in the 2016 research paper “Speeding up Web Pages Loads with Shandian” by Wang, et al. The following illustration depicts a high-level view of the Shandian approach:

Shandian first preprocesses the web page on the proxy server by dividing objects of this web page into two states, such as load time state and post load state. The load time state separates the objects that are required at the time of initial load. Primarily, it contains HTML elements with their stylings, which is the result of the JavaScript and CSS evaluation (except for the CSS style computations). The proxy server migrates this state into JSON format to the client browser. Due to this, Shandian uses the modified client browser, such as a JSON lexer parser, instead of the default HTML parser.

Note: In order to reduce round-trip time and quickly obtain the requested resources, a proxy server is either situated near the server, or it can be part of the service (a reverse proxy).

On the other hand, the post load state separates the objects that are required after the initial load. It consists of the remaining JavaScript and inline/external links to CSS. Also, it includes unmodified data from CDNs. Post load state executes in the background during the loading phase so that users can continue interacting with the page.

The pros and cons of these states are given below:

After that, this state also migrates to the client browser and makes the page completely interactive. Shandian is compatible with latency-reducing techniques because it keeps the original URLs for images, video, and so on in the post load state, so this data can be loaded from the CDNs.

Shandian has improved overall page load times approximately from 50% to 60%. However, this improvement in latency costs an additional computation on the proxy server to preload the page on the proxy server.

Minimize PLT using other techniques#

Apart from Shandian, here are some useful techniques employed over the years that can be helpful in improving the page load time:

• JavaScript and CSS minification: Reducing the size of JavaScript and CSS by removing extra comments, spaces, and characters can reduce the size of these files and facilitate quick loading.

• Image size compression: Large images drastically slow down the web page. Image compression tools reduce the size of images while maintaining good quality.

• Reduce links: Using too many links on the page can force the browser to obtain objects from different domains. This drastically increases page load times. Keeping a check on the number of links is crucial to a lower page load time.

Summary#

In this lesson, we studied the novel system Shandian, which reduces user-perceived latencies by minimizing the inefficiencies in typical page construction and parsing phases.